<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="frm" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<script type="text/javascript">

    var jsonArray = ${getBooksJsonForTable};

    YAHOO.util.Event.addListener(window, "load", function() {
        YAHOO.example.Basic = function() {
            var myColumnDefs = [
                {key:"id", label:"ID", width:100, sortable:true, resizeable:true},
                {key:"title", label:"Title", width: 300, sortable:true, resizeable:true},
                {key:"authors", label:"Authors", width:250, sortable:true, resizeable:true},
                {key:"pubDate", label:"Public Date", width: 120, formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true}
            ];

            var myDataSource = new YAHOO.util.DataSource(jsonArray);

            myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;

            myDataSource.responseSchema = {
                resultsList: "books",
                fields : ["id","title","authors","pubDate"]

            };
            
            var oConfigs = {
                paginator: new YAHOO.widget.Paginator({
                    rowsPerPage: jsonArray.pageSize,
                    totalRecords: jsonArray.totalItems
                }),
                initialRequest: "results=504",
                caption:"Books list"
            };

            var myDataTable = new YAHOO.widget.DataTable("dataTable", myColumnDefs, myDataSource, oConfigs);

            return {
                oDS : myDataSource,

                oDT: myDataTable
            };
        }();
    });
</script>

<style type="text/css">
    #dataTable {
        text-align: center;
    }

    #dataTable table {
        margin-left: auto;
        margin-right: auto;
    }

    #dataTable, #dataTable .yui-dt-loading {
        text-align: center;
        background-color: transparent;
    }

</style>

<div id="dataTable"></div>